package myJs.cps.myTable

import myJs.cps.Style
import myJs.tool.Pojo._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.collection.immutable.SeqMap
import myJs.Implicits._
import myJs.myPkg.i18n.ReactI18next
import slinky.core.facade.Hooks.useEffect

import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object PaginationCp {

  case class Props(totalRows: Int, pageFrom: Int, pageTo: Int, pageList: List[Int], pageSize: Int,
                   pageSizeChange: Int => Unit, pageNumber: Int,
                   pageNumberChange: Int => Unit)

  val component = FunctionalComponent[Props] { props =>

    val js.Tuple3(t, i18n, _) = ReactI18next.useTranslation()

    val totalRows = props.totalRows
    val pageSize = props.pageSize
    val pageNumber = props.pageNumber
    val totalPages = ((totalRows - 1) / pageSize) + 1

    object FTool {

      def pageSizeChange(x: Int) = () => {
        props.pageSizeChange(x)
      }

      def pagePre = () => {
        val curPageNumber = if (pageNumber - 1 == 0) totalPages else pageNumber - 1
        props.pageNumberChange(curPageNumber)
      }

      def pageNext = () => {
        val curPageNumber = if (pageNumber + 1 > totalPages) 1 else pageNumber + 1
        props.pageNumberChange(curPageNumber)
      }

      def pageNumberChange(x: Int) = () => {
        props.pageNumberChange(x)
      }

    }

    useEffect(() => {
      if (pageNumber > totalPages) {
        props.pageNumberChange(totalPages)
      }
    }, List(totalPages)
    )

    if (props.totalRows > 0) {
      val pageList = props.pageList.zipWithIndex.filter { case (x, curI) =>
        curI == 0 || props.pageList(curI - 1) < props.totalRows
      }
      div(className := "fixed-table-pagination",
        div(className := "pull-left pagination-detail",
          span(className := "pagination-info",
            t("formatShowingRows",js.Dictionary("pageFrom"->props.pageFrom,"pageTo"->props.pageTo,"totalRows"->totalRows)),
          ),
          if (pageList.size >= 2) {
            span(className := "page-list",
              t("eachPageShow"),
              span(className := "btn-group dropdown dropup",
                button(className := "btn btn-default dropdown-toggle", data - "toggle" := "dropdown",
                  span(className := "page-size", s"${props.pageSize}"),
                  " ",
                  span(className := "caret"),
                ),
                ul(className := "dropdown-menu",
                  pageList.map { case (x, curI) =>
                    val activeStr = if (x == props.pageSize) {
                      "active"
                    } else ""
                    li(key := s"${curI}", className := s"${activeStr}",
                      a(onClick := FTool.pageSizeChange(x), s"${x}")
                    )
                  }
                )
              ),
              t("formatRecordsPerPage")
            )
          } else null
        ),
        if (totalPages <= 1) {
          null
        } else {
          val dotted = "..."
          val pages = if (totalPages > 7) {
            val left = if (pageNumber < 5) {
              if (pageNumber == 1) {
                List.empty[Int]
              } else {
                (1 to pageNumber - 1).toList
              }
            } else {
              List(1) ::: List(dotted) ::: List(pageNumber - 1)
            }
            val rightMoreNum = 7 - left.size - 1 - 3
            val right = if (pageNumber >= totalPages - 3) {
              (pageNumber + 1 to totalPages).toList
            } else {
              (pageNumber + 1 to pageNumber + 1 + rightMoreNum).toList ::: List(dotted) ::: List(totalPages)
            }
            val leftMoreNum = 7 - left.size - right.size - 1
            val finalLeft = if (leftMoreNum > 0) {
              left.removedV(pageNumber - 1) ::: (pageNumber - 1 - leftMoreNum to pageNumber - 1).toList
            } else left
            finalLeft ::: List(pageNumber) ::: right
          } else {
            (1 to totalPages).toList
          }
          div(className := "pull-right pagination",
            ul(className := "pagination",
              li(className := "page-item page-pre", onClick := FTool.pagePre,
                a(className := "page-link", aria - "label" := "previous page", "‹")
              ),
              pages.zipWithIndex.map {case(tmpX,curI) =>
                val xStr = tmpX.toString
                if (xStr == dotted) {
                  li(key := s"${curI}", className := s"page-item page-first-separator disabled",
                    a(className := "page-link", s"${xStr}")
                  )
                } else {
                  val x = xStr.toInt
                  val activeStr = if (x == pageNumber) {
                    "active"
                  } else ""
                  li(key := s"${curI}", className := s"page-item ${activeStr}", onClick := FTool.pageNumberChange(x),
                    a(className := "page-link", s"${x}")
                  )
                }
              },
              li(className := "page-item page-next", onClick := FTool.pageNext,
                a(className := "page-link", "›")
              ),
            )
          )
        }

      )
    } else null


  }


}
